<template>
  <div class="login-inner" :class="{darkLogin:darkTheme}">
      <div class="login-box">
          <el-card shadow="hover">
              <img src="../../../public/img/login.png" class="login-logo">
              <div class="ipt-btn"><el-input placeholder="请输入用户名"  prefix-icon="el-icon-user-solid" v-model="username" v-focus></el-input></div>
              <div class="ipt-btn"><el-input placeholder="请输入密码" show-password  prefix-icon="el-icon-info" v-model="password" @keyup.enter.native="login"></el-input></div>
               <el-button type="primary" icon="el-icon-position" @click="login" size="mini" plain>登录</el-button>
          </el-card>
      </div>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import uri from '@/config/uri'
export default {
    data(){
        return {
            username: '',
            password: ''
        }
    },
    computed:{
        // ...mapState("manage",["flag"])
        ...mapState("common",["darkTheme"])
    },
    methods:{
        ...mapMutations("manage",["setFlag"]),
        login(){
            //判断密码，正确再登录
            this.$http.post(uri.login,{username:this.username,password:this.password})
            .then((data)=>{
                if(!data.err){ //登陆成功
                    this.$message({
                        type: 'success',
                        message: '登录成功'
                    })
                    this.setFlag(true)
                    let tempLocal = {"flag":true}
                    localStorage.setItem('user',JSON.stringify(tempLocal))
                }else{
                    this.$message({
                        type: 'warning',
                        message: data.msg
                    })
                }

            }).catch((err)=>{
                this.$message({
                    type: 'warning',
                    message: err
                })
            })
            
        }
    },
    directives: {
        
        // 饿了么el-input的focus事件不在自己身上，而是自己的第一个儿子身上，用指令让他儿子自动对焦
        focus: {
            // 指令的定义
            inserted: function (el) {
                el.children[0].focus()
            }
        }
    },
    beforeMount(){
        if(localStorage.getItem('user')){
            var user = JSON.parse(localStorage.getItem('user'))
            if(user["flag"]==true){
                this.setFlag(true)
            }
        }
    }
}
</script>

<style lang="scss">
.login-inner{
    /* margin: 80px; */
    position: relative; 
    overflow: hidden;
    /* background-color: aliceblue; */
     border: 1px solid #e4e7ed;
    background: url("https://cdn.jsdelivr.net/gh/Anyway521/blogpic2@main/image/news.png");
}
.login-box{
    width: 300px;
    margin: 170px auto;
}
.login-logo{
    width: 100%;
}
.ipt-btn{
    margin: 20px 0;
}

// 暗黑主题
.darkLogin{
   
    border: none;
    box-shadow: 0 0 10px rgb(61 122 132 / 50%);
    .el-card{
        background-color: transparent;
        border: 1px solid #1989fa;
    }
    .el-input__inner{
        background-color: transparent;
        color: aqua;
    }
    .el-button{
        background-color: transparent;
    }
}
</style>